<template>
    <div class="grade-models-result-list">
        <Card>
            <ChangeForm :formValidate="formValidate" :dataDict="dataDict" :loading="loading" @getList="getList"/>
            <ChangeTable
                :spinShow="spinShow"
                :formValidate="formValidate"
                :dataDict="dataDict"
                :contractTable="contractTable"
                :loading="loading"
                @getList="getList"
                @closeSpin="closeSpin"
                @showSpin="showSpin"
            />
        </Card>
        <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
</template>

<script>
import  moment from 'moment'
import {queryGradeResult} from "_p/afs-channel/api/grade-model"

import {getDictDataList} from "_p/afs-channel/assets/js/utils";

import {getDictDataByType} from "_p/basic/api/admin/datadic";

import {deepClone} from "@/libs/utils/ObjectClone";

import ChangeForm from "./ChangeForm";
import ChangeTable from "./ChangeTable";

export default {
    //
    name: "GradeModelsResultList",
    components: {
        ChangeForm,
        ChangeTable,
    },
    data() {
        return {
            spinShow: false,
            loading: false,
            scoreEnd: null,
            scoreStart: null,
            canTableRunder: false,
            dicttArr: [
                "channelBelong", //渠道归属
                "bussinessType",
                "businessType",
                "modelValue"
            ],
            dataDict: {},
            formValidate: {
                pageNumber: 1,
                pageSize: 10,
                condition: {
                    scoreStart: null,
                    scoreEnd: null
                }
            },
            contractTable: {
                current: 1, // 表格当前页
                pages: 0,
                searchCount: false,
                size: 10,
                total: 0,
                orders: [],
                records: []
            },
        };
    },

    activated() {
        this.init();
    },
    methods: {
        init() {
            this.getList(this.formValidate);
            this.getDictDataList();
        },
        getDictDataList() {
            getDictDataList(this.dicttArr).then(res => {
                console.group("数据字典:");
                console.log(this.dicttArr.join("  "));
                console.log(JSON.parse(JSON.stringify(res)));
                console.groupEnd();
                this.dataDict = res;
            });
        },
        getList(queryData) {
            if (this.loading || !queryData) return;
            this.loading = true;
            let data = deepClone(queryData)
            if(data.condition && data.condition.gradeDateStr8){
                data.condition.gradeDateStr8 = moment(data.condition.gradeDateStr8).format("YYYY-MM-DD")
            }
            queryGradeResult(data).then((res) => {
                this.loading = false;
                if (res.code === "0000" && res.data) {
                    // const {records} = res.data
                    // let d = []
                    // Array.isArray(records) && records.forEach(ele => {
                    //     ele.cellClassName = {modelValue: 'modelValue_' + ele.modelValue}
                    //     d.push(ele)
                    // })
                    // res.data.records = d;
                    this.contractTable = res.data;
                }
            }).catch(e => {
                this.loading = false;
                console.error(e)
            })
        },

        getTitle(data, val) {
            if (!val || !Array.isArray(data)) return '';
            let d = data.filter(i => i.value == val);
            if (d[0] && d[0].title) {
                return d[0].title;
            }
            return val; // 没有数据返回原值
        },
        showSpin() {
            this.spinShow = true;
        },
        closeSpin() {
            this.spinShow = false;
        },
    },
};
</script>
<style lang="less">
.grade-models-result-list {

    .scoreRange {
        width: 200px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        > div {
            width: 90px;
        }
    }

    .modelValue_A {
        background-color: blue;
        color: #fff;
        border-color: blue;

        span {
            color: #fff !important;
        }
    }

    .modelValue_B {
        background-color: green;
        color: #fff;
        border-color: green;

        span {
            color: #fff !important;
        }
    }

    .modelValue_C {
        background-color: yellow;
        border-color: yellow;
    }

    .modelValue_D {
        background-color: red;
        border-color: red;
        color: #fff;

        span {
            color: #fff !important;
        }
    }
}

</style>
